<!-- 生产派工单列表信息页面 -->
<template>
	<view class="">
		<newNavBar :rightWidth="90">
			<template v-slot:right>
				<view style="display: flex;flex-direction: row; height: 100%;">
					<view @click="scanPlanCode"
						style="padding-right: 15px;  height:   100%;display: flex; align-items: center;">
						<uni-icons color="#fff" :size="22" type="scan"></uni-icons>
					</view>
					<view @click="toReportWageInfos"
						style="padding-right: 10px;  height:   100%;display: flex; align-items: center;">
						<uni-icons customPrefix="iconfont" color="#fff" :size="20" type="layui-icon-slider"></uni-icons>
					</view>
					<!-- <view @click="filterOpen"
						style="padding-left: 5px;  height: 100%;display: flex; align-items: center;">
						<uni-icons customPrefix="my-iconfont" color="#fff" :size="20" type="icon-shaixuan"></uni-icons>
					</view> -->
				</view>
			</template>
		</newNavBar>

	</view>
	<view>
		<uni-forms class="content" label-position="left">
			<uni-forms-item label="机台" :labelWidth='100' style="margin-top: -5px;" required>
				<view style="display: flex;align-items: center;">
					<uni-easyinput type="text" v-model="deviceCode" :focus="true" placeholder="请输入机台编号"
						@confirm="scanInput" />
					<uni-icons type="scan" size="27" style="margin-left: 6px;" @click="scanPlanCode" />
				</view>
			</uni-forms-item>
		</uni-forms>
	</view>
	<view style="">
		<listView ref="listView" :swiperHeight="swiperHeight" scrollY="true" @scrolltolower="scrolltolower"
			:headData="headInfo" :listData="pgListInfo" :loadMore="loadMore" :loadStaus="loadStaus"
			:cellColorStyle="listCellColorStyle">
			<template v-slot="{ msg }">
				<view style="display: flex;flex-direction: row; justify-content: space-between;">
					<view style="padding:0 10px 0 10px;">
						<uni-icons color="#ffaa00" customPrefix="iconfont" :size="30" @click="reportWageInfos(msg)"
							type="layui-icon-form"></uni-icons>
					</view>
					<view v-show="showAdd(msg)" style="padding:0 10px 0 0px;">
						<uni-icons color="#ba251e" :size="34" @click="addWork(msg)" type="plus"></uni-icons>
					</view>
				</view>
				<!-- <view class="" :style="{'transform':'rotate(-35deg)','position': 'absolute','right': '10px','top': '5px',
						'display': 'flex','flex-direction': 'columns',
						'align-items': 'center','justify-content': 'center', 
						'width': '10px','height': '10px','border':'3px solid',
						 'border-color':getlistStyle(msg).borderColor,'background-color':getlistStyle(msg).borderColor, 'border-radius':'50%'}">
					<view>
						<uni-tag
							customStyle="padding:0px;font-weight: bold; background-color: #ffffff00; border-width: 0px; font-size: 16px;"
							:inverted="true" :text="getlistStyle(msg).tagText" :type="getlistStyle(msg).tagType" />
					</view>
				</view> -->
			</template>
		</listView>
	</view>

	<!-- 右侧筛选框界面 -->
	<uni-drawer ref="showRight" mode="right" :width="windowWidth">
		<view class="close" :style="{ backgroundColor: '#fff',marginTop: StatusBar+'px'}">
			<filterView @clikeLeft="closeDrawer" @reset="reset" @query="query">
				<uni-forms ref="baseForm" :modelValue="queryData" class="content" label-position="top">
					<uni-forms-item label="开工日期" name="date" :labelWidth="labelWidth" required>
						<uni-datetime-picker type="date" :clear-icon="false" v-model="queryData.date" />
					</uni-forms-item>
					<uni-forms-item label="工序名称" name="gxCode" :labelWidth="labelWidth" required>
						<uni-data-select v-model="queryData.gxCode" :localdata="baseRangeInfo.gxRange"
							@change="change($event,'gx')" />
					</uni-forms-item>
					<!-- <uni-forms-item label="班组名称" name="groupCode" :labelWidth="labelWidth" required>
						<uni-data-select v-model="queryData.groupCode" :localdata="baseRangeInfo.groupRange"
							@change="change" />
					</uni-forms-item> -->
					<uni-forms-item label="单据状态" name="isFinish" :labelWidth="labelWidth" required>
						<uni-data-select v-model="queryData.isFinish" :localdata="baseRangeInfo.djTypeRange"
							@change="change" />
					</uni-forms-item>
					<uni-forms-item label="是否允许报工" name="canBg" :labelWidth="labelWidth" required>
						<uni-data-select v-model="queryData.canBg" :localdata="baseRangeInfo.yxbgTypeRange"
							@change="change" />
					</uni-forms-item>
					<uni-forms-item label="派工单号" name="orderCode" :labelWidth="labelWidth" required>
						<uni-easyinput v-model="queryData.orderCode"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="存货编码" name="proCode" :labelWidth="labelWidth" required>
						<uni-easyinput v-model="queryData.proCode"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="存货名称" name="proName" :labelWidth="labelWidth" required>
						<uni-easyinput v-model="queryData.proName"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="生产单号" name="plCode" :labelWidth="labelWidth" required>
						<view style="display: flex;align-items: center;">
							<uni-easyinput type="text" v-model="queryData.plCode" />
							<uni-icons type="scan" size="27" style="margin-left: 6px;" @click="iconClick" />
						</view>
					</uni-forms-item>
				</uni-forms>

			</filterView>
		</view>
	</uni-drawer>

</template>

<script>
	import * as SystemJs from '../../common/system.js'
	import * as configJs from '../../common/config.js'
	export default {
		data() {
			return {
				pageCode: '',
				pageType: '',
				mainColor: '',
				//添加报工数据信息
				baseFormData: {
					pgCode: '',
					number: '',
					disNumber: '',
					happenDate: ''
				},
				//查询数据信息
				queryData: {
					proCode: '',
					proName: '',
					orderCode: '', //派工单号
					gxCode: '',
					groupCode: '',
					date: '',
					isFinish: '0',
					plCode: '', //生产计划号
					canBg: '1' //派工单是否允许报工
				},
				baseRangeInfo: {
					gxRange: [], //工序类型列表
					groupRange: [], //班组名称列表
					//单据状态列表
					djTypeRange: [{
						text: "未完成",
						value: "0"
					}, {
						text: "已完成",
						value: "1"
					}],
					yxbgTypeRange: [{
						text: "禁止报工",
						value: "0"
					}, {
						text: "允许报工",
						value: "1"
					}]
				},
				current: 0,
				items: [],
				labelWidth: 100,
				rightIcon: '',
				//滑动区域的高度(单位px)
				swiperHeight: 0,
				windowWidth: 0,
				StatusBar: 0,
				userListInfo: [],
				//悬浮按钮进行移动
				x: 0,
				y: 0,
				//悬浮按钮的样式设置
				pattern: {
					color: '#000',
					backgroundColor: '#fff',
					selectedColor: '#000',
					buttonColor: configJs.baseColor.mainTitleColor,
					iconColor: '#fff'
				},
				loadMore: true, //是否显示加载更多
				loadStaus: 'noMore', //是否显示加载状态
				sumPages: 1, //列表总页数
				page: 1, //当前数据加载页
				userInfo: {},
				headInfo: [], //信息显示列表格式
				listInfo: [], //信息显示列表
				pgListInfo: [], //报工数据信息列表
				addBGIndex: 0, //当前点击添加报工记录的索引
				noClick: true,
				bhgbGX: [], //补货该标的工序

				deviceCode: '', // 扫描的机台码
			}
		},
		onShow() {
			// if (this.addBGIndex >= 0) {
			// 	if (this.addBGIndex == 0) {
			// 		this.getListInfo(true, 1);
			// 	} else {
			// 		this.getListInfo(true, this.page);
			// 	}
			// }
		},
		onLoad(res) {
			this.pageCode = res.pageCode;
			SystemJs.systemJs.showTitleBar(res.pageName, true)
			this.mainColor = configJs.baseColor.mainTitleColor;
			//设置默认日期
			this.baseFormData.happenDate = SystemJs.systemJs.getDate()
			this.items = ['生产报工列表', '添加报工'];
			this.rightIcon = 'icon-shaixuan';
			this.userInfo = configJs.getBaseInfo.getUserInfo();
			//获取屏幕高度
			uni.getSystemInfo({
				success: (res) => {
					this.x = res.windowWidth * 0.7;
					this.y = res.windowHeight * 0.8
					this.windowWidth = res.windowWidth;
					var statusBar = res.statusBarHeight //状态栏高度
					//屏幕高度-状态栏高度-自定义导航栏高度
					this.swiperHeight = res.screenHeight - statusBar - 45
					this.StatusBar = statusBar
					console.log('heightShow', this.swiperHeight)
				}
			})

			this.userListInfo = [{
					list: [{
						content: [{
								title: "人员编码",
								value: 'admin'
							},
							{
								title: "人员名称",
								value: '管理员'
							}
						]
					}, {
						content: [{
							type: "input",
							title: "合格数",
							value: '123'
						}, {
							type: "input",
							title: "不合格数",
							value: '200'
						}]
					}]
				},
				{
					list: [{
						content: [{
								title: "人员编码",
								value: 'admin'
							},
							{
								title: "人员名称",
								value: '管理员'
							}
						]
					}, {
						content: [{
							type: "input",
							title: "合格数",
							value: '123'
						}, {
							type: "input",
							title: "不合格数",
							value: '200'
						}]
					}]
				}
			]
			// this.getListInfo();
			// this.getCommRangeInfo();
		},
		methods: {
			showAdd(index) {
				var flag = false;
				if (this.pgListInfo && this.pgListInfo.length > 0) {
					var obj = this.pgListInfo[index];
					if (obj != undefined) {
						if (obj.isFinish == "0") {
							flag = true;
							//如果该班组设置了班组长，那就要判断该记录只能由班组长进行报工
							if (obj.leader && !SystemJs.systemJs.IsEmpty(obj.leader)) {
								if (obj.leader.indexOf(this.userInfo.userCode) < 0) {
									flag = false;
								}
							}
						}
					}
				}
				return flag
			},
			/**
			 * 显示派工单等级
			 * @param {Object} index
			 */
			getlistStyle(index) {
				var obj = {};
				obj.tagText = "";
				obj.tagType = ""
				obj.borderColor = ""
				if (this.pgListInfo && this.pgListInfo.length > 0) {
					var item = this.pgListInfo[Number(index)];
					if (item.isUrgent != undefined && item.isUrgent == "0") {
						obj.tagText = "普通";
						obj.tagType = "primary"
						obj.borderColor = "#0055ff"
					}
					if (item.isUrgent != undefined && item.isUrgent == "1") {
						obj.tagText = "紧急";
						obj.tagType = "error"
						obj.borderColor = "#e43d33"
					}
					return obj;
				}
			},
			/**
			 * 修改列表中某一列的颜色样式
			 * @param {Object} obj
			 */
			listCellColorStyle(obj) {
				var cellColor = "";
				var index = obj.index; //列表数据下标
				var code = obj.code; //列字段编码
				if (this.pgListInfo != undefined && this.pgListInfo.length > 0) {
					if (index != undefined && index >= 0 && code != undefined && !SystemJs.systemJs.IsEmpty(code)) {
						var item = this.pgListInfo[Number(index)];
						if (item != undefined && code == "plCodes") {
							if (item.isUrgent != undefined && item.isUrgent == "0") {
								cellColor = "#0055ff"
							}
							if (item.isUrgent != undefined && item.isUrgent == "1") {
								cellColor = "#e43d33"
							}
						}
					}
				}
				return cellColor;
			},
			async getGroupInfo(pgxCode) {
				//获取班组数据信息
				this.baseRangeInfo.groupRange = await configJs.getBaseInfo.getGXGroupInfo({
					pgxCode: pgxCode
				});
				// this.baseFormData.groupCode = SystemJs.systemJs.selectDefaultRage(this.baseRangeInfo.groupRange,
				// 	[])
			},
			async getCommRangeInfo() {
				//获取工序数据信息
				this.baseRangeInfo.gxRange = await configJs.getBaseInfo.getGXInfo();
				// this.baseFormData.gxCode = SystemJs.systemJs.selectDefaultRage(this.baseRangeInfo.gxRange, [])
				//获取班组数据信息
				await this.getGroupInfo();

				var objRange = await configJs.getBaseInfo.getParamentersInfo({
					code: 'rs_ct_config'
				})
				if (objRange && objRange.length > 0) {
					var obj = JSON.parse(objRange[0].parValue);
					if (obj && obj.gx) {
						this.bhgbGX = obj.gx;
					}
				}
			},
			/**
			 * 获取派工单列表信息
			 */
			getListInfo(isFirst = true, pageIndex = 1) {
				if (isFirst) {
					this.clearListInfo();
				}
				var obj = {};
				obj = SystemJs.systemJs.copyObject(this.queryData)
				obj.operateType = this.pageType;
				obj.baseCode = uni.getStorageSync('account');
				obj.inOutType = this.pageCode;
				obj.mobType = "H5";
				obj.pageIndex = pageIndex;
				obj.selectIndex = this.addBGIndex; //选择定位的索引
				obj.deviceCode = this.deviceCode;
				var createuser = '';
				if (this.userInfo.userCode) {
					createuser = this.userInfo.userCode;
				}
				obj.createuser = createuser;
				obj.loginUserCode = createuser;
				SystemJs.httpUnit.requestCryptoPost({
					url: 'MachineWorkReport/GetDispatchWork',
					data: obj
				}).then((res) => {
					if (res.Result) {
						var obj = res.Data;
						this.sumPages = Number(obj.listInfo.pageNumber);
						this.page = Number(obj.listInfo.pageIndex);
						this.headInfo = obj.listInfo.head;
						if (!isFirst) {
							this.pgListInfo = this.pgListInfo.concat(obj.listInfo.list);
						} else {
							this.pgListInfo = obj.listInfo.list;
						}
						// this.sumList = this.createListItemInfo(obj.sumList.head, obj.sumList.list);
						this.$nextTick(() => {
							if (this.addBGIndex > 0) {
								this.$refs.listView.autoScrollRow(this.addBGIndex);
							}
							this.addBGIndex = 0;
							// SystemJs.systemJs.getByIdHeight("listTop", this, 'listSumHeight');
						})
						this.loadStaus = "noMore";
					} else {
						SystemJs.httpUnit.uniToast(res.Message)
						this.clearListInfo();
					}
				}).catch((err) => {
					SystemJs.httpUnit.uniToast(JSON.stringify(err))
				})
			},
			/**
			 * 清除列表字段信息
			 */
			clearListInfo() {
				this.listSumHeight = 0;
				this.listInfo = [];
				this.pgListInfo = [];
				this.sumList = [];
				this.loadMore = true;
				this.loadStaus = "noMore";
				this.page = 1;
				this.sumPages = 1;
			},
			/**
			 * swiperView滑动到底部监听事件
			 * @param {Object} e
			 */
			scrolltolower(e) {
				console.log("滚动到底部");
				this.loadMore = false;
				if (this.page >= this.sumPages) {
					this.loadStaus = "noMore";
				} else {
					this.loadStaus = "loading";
					// this.page++;
					var page = this.page + 1;
					var timeout = setTimeout(() => {
						this.getListInfo(false, page);
						clearTimeout(timeout);
					}, 1000)
				}
				this.loadMore = true;
			},
			//获取列表内容中每行的个数
			getListContent(content) {
				var count = 0;
				if (content.length > 0) {
					count = 24 / content.length
				}
				return count;
			},
			//添加报工记录
			addWork(index) {
				var obj = {};
				this.addBGIndex = index;
				var item = this.pgListInfo[index];
				obj.pgCode = item.pKey
				obj.groupCode = item.groupCode
				obj.parentGx = item.parentGx
				obj.plType = item.plType; //计划类型
				obj.yNum = (item.bgxNumber - item.bgNumber) //上道工序合格数量-已报工数

				obj.deviceCode = this.deviceCode;
				//改标补数的工艺可用数量为上道工序报工数-已报合格数（已报工总数-已报不合格数）
				if (this.bhgbGX && this.bhgbGX.length > 0) {
					if (this.bhgbGX.includes(item.parentGx)) {
						obj.yNum = (item.bgxNumber - (item.bgNumber - item.bgnNumber)) //上道工序合格数量-已报工数
					}
				}

				var objStr = JSON.stringify(obj);
				uni.navigateTo({
					url: `/pages/work_report/addmawork?pageCode=${this.pageCode}&obj=${objStr}`
				})
			},
			/**
			 * 跳转到报工记录列表
			 * 默认只能查看自己创建的报工记录
			 */
			toReportWageInfos() {
				var obj = {};
				this.addBGIndex = 0;
				this.clearListInfo();
				var objStr = JSON.stringify(obj);
				uni.navigateTo({
					url: `/pages/business/productReportWage?pageCode=${this.pageCode}&dataType=list&obj=${objStr}&operationType=add`
				})
			},
			/**
			 * 派工单跳转到报工记录
			 * @param {Object} index
			 */
			reportWageInfos(index) {
				var obj = {};
				if (index != undefined && index >= 0) {
					this.addBGIndex = index;
					var item = this.pgListInfo[index];
					obj.pgCode = item.pKey
					obj.groupCode = item.groupCode
					obj.parentGx = item.parentGx
				}
				var objStr = JSON.stringify(obj);
				uni.navigateTo({
					url: `/pages/business/productReportWage?pageCode=${this.pageCode}&obj=${objStr}&operationType=add`
				})
			},
			/**
			 * 扫描生产计划单号进行派工单查询
			 */
			scanPlanCode() {
				uni.scanCode({
					scanType: ['barCode', 'qrCode'],
					success: (res) => {
						this.deviceCode = res.result;
						this.getListInfo();
						console.log("e:", res.result);
					},
					fail: (err) => {
						console.log("e:", err);
						SystemJs.httpUnit.uniToast(JSON.stringify(err));
					}
				})
			},
			change(e, type) {
				if (type == "gx") {
					console.log(e)
					if (!SystemJs.systemJs.IsEmpty(e)) {
						var selectPGXCode = SystemJs.systemJs.selectRage(this.baseRangeInfo.gxRange, e)
						if (selectPGXCode) {
							this.getGroupInfo(selectPGXCode.pgxCode);
						}
					} else {
						this.getGroupInfo();
					}
				}
			},
			//点击导航
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
					if (this.current == 1) {
						this.rightIcon = ''
					} else {
						this.rightIcon = 'icon-shaixuan';
					}
				}
			},
			//点击扫描按钮
			iconClick(type) {
				uni.scanCode({
					scanType: ['barCode', 'qrCode'],
					success: (res) => {
						this.queryData.plCode = res.result;
						console.log("e:", res.result);
					},
					fail: (err) => {
						console.log("e:", err);
						SystemJs.httpUnit.uniToast(JSON.stringify(err));
					}
				})
			},
			//打开日期选择器
			open() {
				this.$nextTick(() => {
					this.$refs.happenDate.open();
				})
			},
			//选择日期确认事件
			confirm(e) {
				console.log(e);
				try {
					this.baseFormData.happenDate = e.fulldate
				} catch (e) {
					console.log(e);
				}
			},
			closeDrawer() {
				this.closeRefs('showRight')
			},
			///状态栏右侧图标点击事件
			filterOpen() {
				this.openRefs('showRight')
			},
			//打开控件窗体
			openRefs(e) {
				this.$nextTick(() => {
					this.$refs[e].open()
				})
			},
			//关闭控件窗体
			closeRefs(e) {
				this.$refs[e].close()
			},
			//重置事件
			reset() {
				SystemJs.unitJs.clearObject(this.queryData);
			},
			//查询事件
			query() {
				this.getListInfo();
				console.log('baseForm', this.queryData)
				this.closeRefs('showRight')
			},
			scanInput() {
				this.getListInfo();
			}
		}
	}
</script>

<style scoped>
	.content {
		padding: 15px;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	/* 修改form表单列样式 缩小间距*/
	.uni-forms-item {
		margin-bottom: 0px;
	}

	/* 我们需要在 style 标签上加 scoped，同时使用 deep 穿透  才能修改覆盖了子组件的样式，否则无法在父组件中修改子组件样式*/
	/deep/ .uni-forms-item.is-direction-top .uni-forms-item__label {
		padding: 0px;
	}
</style>